<template>
  <view class="chat-wrap">
    <navigation-title
      :memberNum="memberNum"
      :avatarData="['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k']"
      @handleModify="handleModify"
    ></navigation-title>
    <view class="chat-main">
      <scroll-view
        :scroll-top="scrollTop"
        scroll-y="true"
        class="scroll-Y"
        @scrolltoupper="upper"
        @scrolltolower="lower"
        @scroll="scroll"
      >
        <view v-for="item in chatData" :key="item.time">
          <view class="center" v-if="item.id === 1">
            {{ item.msg }}
          </view>
          <view class="left" v-else-if="item.id === 2">
            <view class="hd-img">
              <image :src="`../../static/images/${item.avatar}.png`"></image>
            </view>
            <view class="content">
              <view class="msg">{{ item.msg }}</view>
              <view class="time">{{ item.time }}</view>
            </view>
          </view>
          <view class="right" v-else
            ><view class="content">
              <view class="msg">{{ item.msg }}</view>
              <view class="time">{{ item.time }}</view>
            </view>
            <view class="hd-img">
              <image :src="`../../static/images/${item.avatar}.png`"></image>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="send">
      <textarea type="text" class="con" v-model="con"></textarea>
      <image src="../../static/images/send.png" @tap="send"></image>
    </view>
    <view class="alone-chat-model" v-show="isShowModel" @tap="handleModify">
      <view class="model-content" :animation="animationData">
        <view class="model-main">
          <view class="name"> 白夜 </view>
          <scroll-view
            :scroll-top="scrollTop"
            scroll-y="true"
            class="scroll-Y"
            @scrolltoupper="upper"
            @scrolltolower="lower"
            @scroll="scroll"
          >
            <view v-for="item in chatData" :key="item.time">
              <view class="center" v-if="item.id === 1">
                {{ item.msg }}
              </view>
              <view class="left" v-else-if="item.id === 2">
                <view class="hd-img">
                  <image
                    :src="`../../static/images/${item.avatar}.png`"
                  ></image>
                </view>
                <view class="content">
                  <view class="msg">{{ item.msg }}</view>
                  <view class="time">{{ item.time }}</view>
                </view>
              </view>
              <view class="right" v-else
                ><view class="content">
                  <view class="msg">{{ item.msg }}</view>
                  <view class="time">{{ item.time }}</view>
                </view>
                <view class="hd-img">
                  <image
                    :src="`../../static/images/${item.avatar}.png`"
                  ></image>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
        <view class="send">
          <textarea type="text" class="con" v-model="con"></textarea>
          <image src="../../static/images/send.png" @tap="send"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      con: "",
      name: "",
      avatar: "",
      isShowModel: false,
      memberNum: 0,
      scrollTop: 0,
      chatData: [],
      animationData: {},
    };
  },
  onLoad(e) {
    console.log(e);
    this.name = e.name;
    this.avatar = e.avatar;
    this.init();
  },
  methods: {
    init() {
      this.join();
      this.welcome();
      this.myself();
      this.getMsg();
      this.quit();
    },
    handleModify() {
      this.isShowModel = !this.isShowModel;

      const animation = uni.createAnimation({
        duration: 1000,
        timingFunction: "ease",
      });

      this.isShowModel ? animation.bottom(0).step() : animation.bottom().step();

      this.animationData = animation.export();
      console.log(this.animationData, "this.animationData");
    },
    quit() {
      this.socket.on("quit", (name, memberNum) => {
        this.memberNum = memberNum;
        this.chatData.push({
          msg: `${name}退出群聊`,
          id: 1,
        });
      });
    },
    getMsg() {
      this.socket.on("getMsg", (data) => {
        this.chatData.push(data);
      });
    },
    send() {
      let data = {
        msg: this.con,
        avatar: this.avatar,
        time: new Date(),
        id: 3,
      };

      let ajaxData = {
        msg: this.con,
        avatar: this.avatar,
        name: this.name,
        time: new Date(),
        id: 2,
      };

      this.chatData.push(data);
      this.socket.emit("sendMsg", ajaxData);
      this.con = "";
    },
    myself() {
      this.socket.on("myself", (data) => {
        this.memberNum = data.memberNum;
      });
    },
    welcome() {
      this.socket.on("welcome", (data) => {
        this.memberNum = data.memberNum;
        this.chatData.push({
          msg: `欢迎${data.name}加入群聊`,
          avatar: data.avatar,
          time: data.time,
          name: data.name,
          id: 1,
        });
      });
    },
    join() {
      this.socket.emit("join", this.name, this.avatar);
    },
    upper: function (e) {
      console.log(e);
    },
    lower: function (e) {
      console.log(e);
    },
    scroll: function (e) {
      console.log(e);
      this.old.scrollTop = e.detail.scrollTop;
    },
    goTop: function (e) {
      this.scrollTop = this.old.scrollTop;
      this.$nextTick(() => {
        this.scrollTop = 0;
      });
      uni.showToast({
        icon: "none",
        title: "纵向滚动 scrollTop 值已被修改为 0",
      });
    },
  },
};
</script>

<style lang="less">
@import url("./index.less");
</style>